<template>
	<view class="" v-if="info">
		<view class="nursing">
			<view class="title" style="margin-bottom: 0;">
				<view class="titleIcon">
					<image src="http://loto.oss-cn-shanghai.aliyuncs.com/email/0d9f0dc55a984b51.png" mode=""></image>
				</view>
				<view class="titleMsg">签约信息
				</view>
			</view>
			<view class="info flex align-center  border-bottom mt-2" style="height:80rpx ;">
				<view class="text-secondary password-title">患者姓名:</view>
				<view class="flex align-center w-100">
		
					{{ info.userName }}
		
				</view>
			</view>
		
			
		</view>
		<view class="nursing">
			<view class="title" style="margin-bottom: 0;">
				<view class="titleIcon">
					<image src="http://loto.oss-cn-shanghai.aliyuncs.com/email/d4266363ee8f4a06.png" mode=""></image>
				</view>
				<view class="titleMsg">签约图片
				</view>
			</view>
			<view class="photoBox">
				
				<view class="photo" v-for="(item,index) in photo" :key="index"
					 @click.prevent="clickImg(index)">
					<!-- <image :src="item" mode="aspectFit"></image> -->
					<image :src="item" mode="aspectFit" />
					
					<!-- <text class="iconfont icon-a-qingkongpng cha" @click.stop="del(index)"></text> -->
				</view>
			</view>
		</view>
		
		<view class="nursing" v-if="info.reasonForRejection">
			<view class="title" style="margin-bottom: 0;">
				<!-- <view class="titleIcon">
					<image src="http://loto.oss-cn-shanghai.aliyuncs.com/email/d4266363ee8f4a06.png" mode=""></image>
				</view> -->
				<view class="titleMsg">拒绝原因: 
				</view>
			</view>
			<view class="photoBox">
				
				<view class="" style="color: red;">
					{{info.reasonForRejection}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		selectSigningReportById
	} from '@/apis/report/index.js'
	export default {
		data() {
			return {
				info: null,
				photo: [
					
				]
			}
		},
		onLoad(opt) {
			this.selectSigningReportById(opt.id)
		},
		methods: {
			clickImg(index) {
				let _this = this
				wx.previewImage({
					urls: _this.photo,
					current: _this.photo[index], // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			selectSigningReportById(id) {
				selectSigningReportById({signingReportId: id}).then(res=>{
					this.info = res.object
					this.photo = res.object.signedPicture.split(',')
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.nursing {
		width: 698rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-bottom: 24rpx;
		padding: 44rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	
		.title {
			line-height: 48rpx;
			display: flex;
			margin-bottom: 32rpx;
			position: relative;
	
			.type {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ff4f4f;
				position: absolute;
				right: -40rpx;
			}
	
			.titleMsg {
				font-size: 40rpx;
				width: 500rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 48rpx;
				// margin-left: 8rpx;
				word-wrap: break-word;
				word-break: normal;
			}
	
			
		}
	
		.titleIcon {
			width: 48rpx;
			height: 48rpx;
			margin-right: 8rpx;
			// background-color: #3C8EFF;
			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	
		.consume_title {
			width: 540rpx;
			margin: 16rpx 0;
			font-size: 28rpx;
			font-weight: 400;
		}
		.info {
			font-size: 32rpx !important;
		}
		
		.password-title {
			min-width: 140rpx;
			white-space: nowrap;
			margin-right: 32rpx;
		}
		
	}
	.photoBox {
		padding: 24rpx 0rpx;
		display: flex;
		// justify-content: space-between;
		flex-wrap: wrap;
		background: #ffffff;
		margin-bottom: 8rpx;
	
		.photo {
			border-radius: 20rpx;
			position: relative;
			margin-right: 20rpx ;
			margin-bottom: 20rpx;
			image {

				width: 140rpx;
				height: 140rpx;
				border-radius: 8rpx;
			}
	
			
		}
	}
</style>